let _Vue = null;

class VueRouter {
    static install(Vue) {
        // 1、判断当前 插件是否被安装
        if (VueRouter.install.installed) {
            return;
        }
        VueRouter.install.installed = true;
        // 2、把Vue的构造函数记录到全局
        _Vue = Vue;
        // 3、把创建Vue的实例传入到router对象注入到Vue实例
        // _Vue.prototype.$router = this.$options.router
        _Vue.mixin({
            beforeCreate() {
                if (this.$options.router) {
                    _Vue.prototype.$router = this.$options.router;
                }
            },
        });
    }

    constructor(options) {
        console.log(options);
        this.options = options;
        this.routeMap = {};
        this.data = _Vue.observable({
            current: "#/",
        });
        this.init();
        window.addEventListener("hashchange", this.onHashChange.bind(this));
        window.addEventListener("load", this.onHashChange.bind(this));
    }
    init() {
        this.createRouteMap();
        this.initComponent(_Vue);
    }
    createRouteMap() {
        this.options.routes.forEach((route) => {
            this.routeMap[route.path] = route.component;
        });
    }
    initComponent(Vue) {
        Vue.component("router-link", {
            props: {
                to: String,
            },
            render(h) {
                return h(
                    "a",
                    {
                        attrs: {
                            href: "#" + this.to,
                        },
                    },
                    [this.$slots.default]
                );
            },
        });
        const self = this;
        Vue.component("router-view", {
            render(h) {
                // self.data.current
                let cm = self.routeMap[self.data.current];
                if(!cm) {
                    cm = self.routeMap['*'];
                }
                return h(cm);
            },
        });
    }
    onHashChange() {
        this.data.current = window.location.hash.slice(1);
        console.log(this.data.current);
    }
}

export default VueRouter;
